.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);

  .songer {

  }

  .circle {
    position: relative;
    z-index: 2;
    width: 60rpx;
    height: 60rpx;
    margin: 20rpx 0;
    border-radius: 50%;
    background: #ffffff;
  }

  .needle {
    position: relative;
    z-index: 1;
    left: 60rpx;
    top: -50rpx;
    width: 192rpx;
    height: 274rpx;
    transition: transform 1s;
    transform-origin: 40rpx 0;

    &.rotate {
      transform: rotateZ(-20deg);
    }
  }

  .disc-wrap {
    position: relative;
    top: -170rpx;
    width: 600rpx;
    height: 600rpx;

    .img-disc {
      width: 100%;
      height: 100%;
    }

    .img-album {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 60%;
      height: 60%;
      border-radius: 50%;
      transform: translate3d(-50%, -50%, 0);

      &.rotate {
        /*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/
        animation: circleAnima 3s linear 1s infinite;
      }
    }
  }

  .progress {
    display: flex;
    align-items: center;
    width: 80%;
    color: #ffffff;

    .start {
    }

    .end {
    }

    .under-bar {
      flex: auto;
      position: relative;
      height: 4rpx;
      margin: 0 15rpx;
      background: #ccc;
    }

    .front-bar {
      position: absolute;
      left: 0;
      top: 0;
      width: 50rpx;
      height: 4rpx;
      background: red;

      .ball{
        position: absolute;
        right: -15rpx;
        top: 50%;
        width: 15rpx;
        height: 15rpx;
        border-radius: 50%;
        transform: translateY(-50%);
        background: #ffffff;
      }
    }
  }

  .controll {
    position: absolute;
    left: 0;
    bottom: 40rpx;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 40rpx;

    text {
      flex: 1;
      color: #ffffff;
      font-size: 50rpx;
      text-align: center;

      &.big {
        font-size: 80rpx;
      }
    }
  }
}


@keyframes circleAnima {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
